<template>
	<view class="coupon-container">
		<u-popup class="coupon-popup pore" v-if="showDialog" :show="showDialog" mode="center"
			:customStyle="{'width':'354px','position':'relative'}" @open="showDialog = true" round="20"
			bgColor="transparent">
			<view class="coupon-wrap">
				<view class="resolve-title">{{ resultData.title }}</view>
				<view class="resolve-content-wrap">
					<!-- <view class="resolve-content">{{ resultData.content }}</view> -->
					<wemark :md="resultData.content" link highlight type="wemark"></wemark>
				</view>
				<view class="result-btn" @tap="showDialog = false">
					<button>我知道了</button>
				</view>
				<view class="tip">推算理论源于八字命理，仅供国学探究，娱乐使用！</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	import wemark from '@/static/wemark/wemark.js'
	export default {
		props: {
			resolveContent: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			wemark
		},
		data() {
			return {
				showDialog: false,
				resultData: {}
			}
		},
		computed: {
			// resultContent() {
			// 	var str = this.resultData.content.replace(/\\n/gm,"<br/>");
			// 	console.log(str, 'resultContent')
			// 	return str
			// }
		},
		watch: {
			resolveContent: {
				handler(newObj) {
					if (newObj && newObj.content) {
						this.showDialog = true
						this.resultData = newObj
						// this.resultData.content = newObj.content.replace('\\n', '\n')
						console.log(this.resultData.content, 'newObj')
					}
					
				},
				immediate: true
			}
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	.coupon-container {
		z-index: 999;

		.coupon-wrap {
			position: relative;
			width: 632rpx;
			// height: 660rpx;
			margin: 0 auto;
			padding: 32rpx 0 28rpx;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/jgtc.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;
			
			.resolve-title {
				font-weight: 600;
				font-size: 36rpx;
				color: #34314F;
				line-height: 25px;
				text-align: center;
				// margin-bottom: 24rpx;
			}
			
			.resolve-content-wrap {
				max-height: 300px;
				padding: 0 32rpx;
				overflow-y: auto;
				.resolve-content {
					text-indent: 2em;
					padding: 0 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
				}
			}
			
			

			.result-text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 368rpx;
				height: 208rpx;
				margin: 0 auto;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/mzg.png') no-repeat center center;
				background-size: 100% 100%;

				.result-item {
					width: 160rpx;
					height: 160rpx;
					margin-top: -8rpx;
					font-weight: 600;
					font-size: 96rpx;
					color: #34314F;
					line-height: 150rpx;
					text-align: center;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/mz.png') no-repeat center center;
					background-size: 100% 100%;
				}
			}

			.result-desc {
				margin: 40rpx auto;

				view {
					font-weight: 400;
					font-size: 32rpx;
					color: #34314F;
					line-height: 44rpx;
					text-align: center;
				}
			}

			.result-btn {
				margin: 24rpx auto;
				// position: absolute;
				// bottom: 100rpx;
				// left: 50%;
				// transform: translateX(-50%);

				button {
					width: 396rpx;
					height: 96rpx;
					background: #FFDE6D;
					border-radius: 20px;
					line-height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}

			.tip {
				// position: absolute;
				// width: 100%;
				// bottom: 28rpx;
				// left: 50%;
				// transform: translateX(-50%);
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 56rpx;
				text-align: center;
				font-style: normal
			}

		}


		.ellipsis {
			max-width: 320rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	/deep/ .wemark_wrapper {
		padding: 0 32rpx !important;
		
	}
</style>